<template>
  <h1>一个人的信息</h1>
  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2 v-show="person.sex">性别：{{ person.sex }}</h2>
  <h2>工作种类：{{ person.job.type }}</h2>
  <h2>工作薪水：{{ person.job.salary }}</h2>
  <h2>
    爱好：<span v-for="(item, index) in person.hobby" :key="index"
      >{{ item }}&nbsp;&nbsp;</span
    >
  </h2>
  <h2>测试数据c：{{ person.job.a.b.c }}</h2>
  <button @click="changeInfo">修改个人信息</button>
  <button @click="addSex">添加sex属性</button>
  <button @click="delName">删除name属性</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    // let num = reactive(666) //无法使用reactive包裹基本数据类型

    // 数据
    const person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "前端工程师",
        salary: "30K",
        a: {
          b: {
            c: 888,
          },
        }
      },
      hobby:["抽烟", "喝酒", "烫头"]
    });

    
    // 修改数据
    function changeInfo() {
      console.log(person); //Proxy对象

      person.name = "李四";
      person.age = 38;
      person.job.type = "UI设计师";
      person.job.salary = "10K";
      person.job.a.b.c = 666;
      person.hobby[0] = '打游戏' //对数组进行修改可以直接被监测到

      // 注意：在vue3.x里，如果要替换一个响应式数组，需采用如下方法
      let arr = ["吃饭", "睡觉", "打豆豆"];
      // person.hobby.splice(0,person.hobby.length)
      person.hobby.length = 0;
      arr.forEach((item) => person.hobby.push(item));
      // console.log(person.hobby); //数组依然是响应式的
    }

    // 添加sex
    function addSex(){
      person.sex = '男' //给对象添加属性可以直接被监测到
    }

    // 删除name
    function delName(){
      delete person.name //删除对象属性可以直接被检测到
    }

    // 返回一个对象供模版使用
    return {
      person,
      changeInfo,
      addSex,
      delName
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
